/**
 * Created by luojie on 2018/3/14.
 * 报名
 */
import api from "../utils/api";
import buyIcon from"../images/check-detail.png";
import conductIcon from "../images/conduct.png";
import Loading from "../components/loading";

export default class Apply extends React.PureComponent{
	constructor(props){
		super(props);
		this.state = {
			isLoading:false,
		};
		this.apply = this.apply.bind(this);
		this.checkDetail = this.checkDetail.bind(this);
	}
	checkDetail(){
		this.props.history.push("/activityDetail");
	}
	apply(){

		let userName = this.getValue("userName");
		let age = this.getValue("age");
		if(!userName){
			showMsg("请输入会员名");
			return;
		}else if(!age){
			showMsg("请输入年龄");
			return;
		}
		let request = {userName,age,openid:getCookie("openid"),type:2,name:"会员卡"};
		ajax(api.addOrder,request,"post",()=>{this.setState({isLoading:true})}).then((result)=>{
			this.setState({isLoading:false});
			if(result.status === 1){
				let obj = result.datas.datas;
				wx.ready(function(res){
					wx.chooseWXPay({
						appId:obj.appid,
						timestamp: obj.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: obj.nonce_str, // 支付签名随机串，不长于 32 位
						package: `prepay_id=${obj.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: obj.paySign, // 支付签名
						success: function (res) {
// 支付成功后的回调函数
						}
					});
				});

				//
				//
				// function onBridgeReady(){
				// 	WeixinJSBridge.invoke(
				// 		'getBrandWCPayRequest', {
				// 			appId:obj.appid,
				// 			timeStamp: obj.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
				// 			nonceStr: obj.nonce_str, // 支付签名随机串，不长于 32 位
				// 			package: `prepay_id=${obj.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
				// 			signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
				// 			paySign: obj.paySign,
				// 		},
				// 		function(res){
				// 			if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
				// 		}
				// 	);
				// }
				// if (typeof WeixinJSBridge == "undefined"){
				// 	if( document.addEventListener ){
				// 		document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
				// 	}else if (document.attachEvent){
				// 		document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
				// 		document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
				// 	}
				// }else{
				// 	onBridgeReady();
				// }

			}else{
				showMsg(result.message);
			}
		})
	}
	getValue(ref){
		return this.refs[ref].value;
	}
	render(){
		let {isLoading} = this.state;
		return(
			<div className="w-100">
				<div className="my-member-input-row">
					<span className="input-label">会员名</span>
					<input className="my-member-input" placeholder="请输入会员名" ref = "userName"  type="text"/>
				</div>
				<div className="my-member-input-row">
					<span className="input-label">年龄</span>
					<input className="my-member-input" placeholder="请输入年龄" ref = "age" maxLength={3} type="tel"/>
				</div>
				<button className="apply-btn" onClick = {this.apply}>点击购买会员卡</button>
				<div className="conduct-row">
					<img onClick = {this.checkDetail} className="check-detail-img" src={buyIcon} alt=""/>
				</div>
				<img className="conduct-img" src={conductIcon} alt=""/>
				<Loading isShow = {isLoading}/>
			</div>
		)
	}
}

